<%-- 
    Document   : ProductDetailContent
    Created on : Jan 2, 2012, 10:46:13 PM
    Author     : Katori
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css/style2.css" rel="stylesheet" type="text/css" />
        <link href="css/chitietsanpham.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery.rating.css" rel="stylesheet" type="text/css" />
        <link href="css/tabs.css" rel="stylesheet" type="text/css" />
        <script language="JavaScript" src="script/jquery.js" type="text/javascript"></script>
        <script language="JavaScript" src="script/jquery.MetaData.js" type="text/javascript"></script>
        <script language="JavaScript" src="script/jquery.rating.js" type="text/javascript"></script>
        <script language="JavaScript" src="script/jquery.rating.pack.js" type="text/javascript"></script>
        <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script language="JavaScript" type="text/javascript">
            $(document).ready(function() {
                $('#tab-menu:first').css('padding-left', '0').append('<li><a href=#>Tab More</a></li>'); //On the fly :)
                var nav_height = $('#nav').css('height');
                //alert('nav_height: '+nav_height);
                var content_height = $('#content').css('height');
                //alert('content_height: '+content_height);
                var common_height =  nav_height > content_height? nav_height : content_height;
                //alert(common_height);
                $('#nav').css('height', common_height);
                $('#content').css('height', common_height);


                $('#main-nav ul li a')
                .click(function(event) {
                    event.preventDefault();
                    $('#main-nav ul li a').removeClass('main-nav-active')
                    $(this)
                    .removeClass('main-nav-hover')
                    .addClass('main-nav-active');
                    $('#tab-content').hide();
                    $('#tab-menu li a').fadeOut('slow').fadeIn('slow');
                    //$('#main-content').fadeOut('slow').fadeIn('slow');
                    delay($('#tab-content'), 1500);
                    $('#secondary-content').hide('slow');
                })
                .hover(
                function() {
                    $(this).addClass('main-nav-hover');
                },
                function() {
                    $(this).removeClass('main-nav-hover');
                }
            );
                $('#tab-menu li a')
                .click(function(event) {
                    event.preventDefault();
                    $('#tab-menu li a').removeClass('tab-menu-active');
                    $(this).removeClass('tab-menu-hover');
                    $(this).addClass('tab-menu-active');
                    $('#tab-content').fadeOut('slow').fadeIn('slow');
                })
                .hover(
                function() {
                    if(!$(this).hasClass('tab-menu-active')) {
                        $(this).addClass('tab-menu-hover');
                    }
                },
                function() {
                    $(this).removeClass('tab-menu-hover');
                });

            });

            function delay(obj, time) {
                window.setTimeout(function() {
                    obj.fadeIn('slow');
                }, time);
            }
        </script>
        <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            $(function () {
                var tabContainers = $('div.tabs > div');
                tabContainers.hide().filter(':first').show();

                $('div.tabs ul.tabNavigation a').click(function () {
                    tabContainers.hide();
                    tabContainers.filter(this.hash).show();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    $(this).addClass('selected');
                    return false;
                }).filter(':first').click();
            });
        </script>
    </head>
</html>

<tiles:insertDefinition name="productDetail" />